<template>
	<view>
		<view class="banner" v-if="Banner.length" style="margin-bottom: 20rpx;height:250rpx; overflow: hidden;">
			<swiper  class="swiper1" :circular="true" :indicator-dots="false" autoplay="true"  interval="2000" duration="500"	>					
				<swiper-item v-for="(item,index) in Banner" :key="index">
					<navigator v-if="item.adv_url" :url="item.adv_url"><image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image></navigator>
					<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
				</swiper-item>	
			</swiper>	
		</view>	
		<!-- <view class="Navigation">
			<view class="stage FlexBox">
				<view class="">
					<view class="fontw">预付定金</view>
					<view class="">至高立减3倍定金</view>
				</view>
				<view class="">
					<view class="fontw">尾款支付</view>
					<view class="">可享优惠券</view>
				</view>
				<view class="">
					<view class="fontw">发货</view>
					<view class="">预付会员优先发货</view>
				</view>
			</view>
			<view class="hrImg"><image src="../../static/images/hrIco_02.jpg" mode=""></image></view>
			<view class="time FlexBox">
				<view class="">
					<view class="fontw">12.1 - 12.30</view>
					<view class="">00:00 - 22:00 </view>
				</view>
				<view class="">
					<view class="fontw">12.31</view>
					<view class="">00:00 - 23:59 </view>
				</view>
				<view class="">
					<view class="fontw">1.1</view>
					<view class="">01:00 开始</view>
				</view>
			</view>
		</view> -->
		<view class="Listbox">
			<view class="Layout FlexBox">
				<view class="List" v-for="(item,index) in list" :key="index" @click="Toxq(item.goods_id)">
					<view class="Imgbox">
						<image :src="item.goods_image" mode=""></image>
					</view>
					<view class="Name Texthide">{{item.goods_name}}</view>
					<view class="Time" v-html="TimeList[index]"><!-- 还有<text>{{shi}}</text>小时<text>{{fen}}</text>分钟{{miao}}秒开始 --></view>
					<view class="price">￥{{item.goods_price}}</view>
					<view class="Earnest">定金￥{{item.earnest_money}}抵￥{{item.deduct}}</view>
				</view>
			</view>
		</view>
		
		
		<view v-if="list.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				shi:"",
				fen:"",
				miao:"",
				curpage:1,
				ImgList:[""],
				TimeList:[],
				Banner:""
			}
		},
		
		onLoad() {
			this.Getlist();
			this.getBanner()
		},
		onReachBottom() {
			if(this.curpage){
				this.Getlist(true)
			}else{
				uni.showToast({
					title:'已是最后一页！',
					icon:'none'
				})
			}
		},
		methods: {
			getBanner(){//获取广告列表
				this.$util.request({
					url: '/mobile/index.php?act=h5_adv&op=advanceSaleAdvList',
					method: 'get',
					data: {},
				}).then((res)=> {
					this.Banner=res.datas.adv_list
				})
			},
			Toxq(goods_id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+goods_id
				})
			},
			Getlist(state){
				let that = this;
				this.$util.request({
						url: '/mobile/index.php?act=promotion_yushou&op=list',
						method: 'get',
						data: {},
					}).then(function(res) {
						if(res.datas.ImgList){//轮播图
							that.ImgList = res.datas.ImgList
						}
						if(res.error_code==0){
							if(state){//列表数据
								that.list = that.list.concat(res.datas.goods_list) 
							}else{
								that.list = res.datas.goods_list
							}
							// that.list=res.datas.goods_list;
							that.curpage++;
							if(that.curpage>=res.datas.page_total){
								that.curpage=false;
							}
						}else{
							uni.showToast({
								icon:"none",
								title:res.message
							})
						}
						if(that.list.length>0){
							for(let i=0;i<that.list.length;i++){
								that.limitFormatTime(that.list[i].end_time,i)
							}
						}
					})
				 
			},
			limitFormatTime(date,i) {
				var that=this;
				var Time=setInterval(()=>{
				var nowstr = (new Date());
				nowstr= parseInt(nowstr.valueOf()/1000)
				var chazhi = (date - nowstr);
				if (chazhi < 0) {
				    chazhi = 0;
					clearInterval(Time);
					that.TimeList.splice(i,1,"<text>已经结束</text>")
				}
				// var d = parseInt(chazhi / 3600 / 24);
				var h = parseInt((chazhi / 3600) );//% 24
				var m = parseInt((chazhi % 3600) / 60);
				var s = parseInt((chazhi % 3600) % 60);
				h=h<10 ? "0" + h:h;
				m=m<10 ? "0" + m:m;
				s=s<10 ? "0" + s:s;
				that.TimeList.splice(i,1,"还有<text>"+h+"</text>小时<text>"+m+"</text>分钟"+s+"秒开始")
			 },1000)
			},

				Splicing(value){
					return	value = value<10?"0"+value:value;
				}
			
			},
				
		}
	
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.Layout {
		margin: 0 15rpx;
		box-sizing: border-box;
	}
	.Banner image{
		width: 100%;
		height: 100%;
	}
	.Navigation{
		background-color: #ff4300;
		margin-top: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.Navigation .hrImg image{
		width: 100%;
		height: 13rpx;
	}
	.Navigation .stage,.Navigation .time{
		padding: 0 20rpx;
	}
	.FlexBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.fontw{
		font-weight: bold;
	}
	.Listbox{
		margin-top: 30rpx;
	}
	.Listbox .List{
		background-color: #FFFFFF;
		width: 350rpx;
		padding: 10rpx;
		position: relative;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}
	.Listbox .Imgbox{
		width: 320rpx;
		height: 320rpx;
		overflow: hidden;
	}
	.Listbox .Imgbox image{
		width: 100%;
		/* height: 280rpx; */
	}
	.Texthide{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.Listbox .List .Time{
		font-size: 18rpx;
		color: #ff4300;
		height: 42rpx;
		
	}
	.Listbox .List .price{
		font-weight: bold;
		color: #ff4300;
	}
	.Listbox .List .Earnest{
		width: 350rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #ff4300;
		margin-left:-10rpx;
		margin-bottom: -10rpx;
	}
</style>
